<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css" />
  </head>
  <body>
    <div class="box">
      <div class="logo">
        <div class="logo-1">
          <img src="img/淘宝网.png" alt="" style="width: 150px" />
        </div>
        <div class="logo-2">用户注册</div>
      </div>
      <form action="">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td>手机号码</td>
            <td colspan="2">
              <select>
                <option value="">中国大陆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+86</option>
                <option value="">中国大陆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+86</option>
                </select
                ><input
                type="text"
                name=""
                id=""
                class="t1"
                placeholder="请输入你的手机号码"
              />
            </td>
          </tr>
          <tr>
            <td>验证码</td>
            <td colspan="2">
              <input
                type="text"
                name=""
                id=""
                class="t2"
                placeholder="请输入校验码"
              /><a href="javascript:;" class="getCode">获取验证码</a>
            </td>
          </tr>
          <tr>
            <td></td>
            <td colspan="2"><button>同意协议并注册</button></td>
          </tr>
          <tr>
            <td></td>
            <td colspan="2" style="text-align: left; padding: 0 3px 0 16px">
              <p1
                >已阅读并同意以下协议<a href="">淘宝平台服务协议</a>、<a href=""
                  >隐私权政策</a
                >、<a href="">法律申明</a>、<a href=""
                  >支付宝及客户服务协议</a
                ></p1
              >
            </td>
          </tr>
          <tr>
            <td colspan="3"><a style="border: 0;" href="">切换成企业账户注册</a></td>
          </tr>
        </table>
      </form>
      <div class="botton">
          <ul>
            <li><a href="javascript:;">阿里巴巴集团</a></li><li><a href="javascript:;">阿里巴巴国际站</a></li><li><a href="javascript:;">阿里巴巴中国站</a></li><li><a href="javascript:;">全球速卖通</a></li><li><a href="javascript:;">淘宝网</a></li><li><a href="javascript:;">天猫</a></li><li><a href="javascript:;">聚划算</a></li><li><a href="javascript:;">一淘</a></li><li><a href="javascript:;">阿里妈妈</a></li><li><a href="javascript:;">阿里云计算</a></li><li><a href="javascript:;">云OS</a></li><li><a href="javascript:;">万网</a></li><li><a href="javascript:;" style="border-right: 0;">支付宝</a></li>
          </ul>
        <div class="botton-2">
          <ul>
            <li><a href="">关于淘宝</a></li>
            <li><a href="">合作伙伴</a></li>
            <li><a href="">营销中心</a></li>
            <li><a href="">联系客服</a></li>
            <li><a href="">开放平台</a></li>
            <li><a href="">诚征英才</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">网站地图</a></li>
            <li><a href="">法律声明及隐私权政策</a></li>
          </ul><span><c>© 2021 Taobao.com 版权所有<br><br>
            &nbsp;&nbsp;网络文化经营许可证：</c>文网文[2010]040号<c> | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号</c></span>
        </div>
      </div>
    </div>
    <script>
      var t1 = document.querySelector('.t1');
      var getCode = document.querySelector('.getCode');
      getCode.addEventListener('click',function () {
        var str = t1.value;
        if(str.length==0){
          getCode.disable;
        }else if(str.length!=11 || isRight(str)==false){
          alert('请输入正确的电话号码');
        }else{
          getCode.style.pointerEvents='none';
          var num = 59;
          var clock = setInterval(() => {
            if (num<0) {
              clearInterval(clock);
              getCode.innerHTML = '获取验证码';
              getCode.style.padding= '6.5px 10px 9px 10px';
              getCode.style.pointerEvents='auto';
            }
            else{
              if(num>9){
                getCode.innerHTML = '重新发送'+num+'s';
              }else{
                getCode.innerHTML = '重新发送0'+num+'s';
              }
              getCode.style.padding= '6.5px 10px 9px 2px';
              num--;
            }
          }, 1000);
        }
      })
      function isRight(str) {
        for (let i = 0; i < str.length; i++) {
          const element = str[i];
          if(!(element>='0' && element<='9')){
            return false;
          }
        }
        return true;
      }
    </script>
  </body>
</html>
